<template>
  <div class="body">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="订单编号:">
        <el-input v-model="formInline.user" style="width:200px" placeholder="请输入订单编号" />
      </el-form-item>

      <el-form-item label="订单状态:">
        <el-input style="width:200px" placeholder="请选择" />
      </el-form-item>

      <el-form-item label="付费状态:">
        <el-select v-model="formInline" placeholder="请选择">
          <el-option label="未付" value="" />
          <el-option label="已付" value="" />
        </el-select>
      </el-form-item>

      <el-form-item label="发件人姓名:">
        <el-input style="width:200px" placeholder="请输入发件人姓名" />
      </el-form-item>
      <el-form-item />

      <el-form-item label="发件人电话:">
        <el-input style="width:200px" placeholder="请输入发件人电话" />
      </el-form-item>
      <el-form-item />

      <el-form-item label="发件人地址:">
        <el-select v-model="formInline" style="width:100px" placeholder="请选择">
          <el-option label="未付" value="" />
          <el-option label="已付" value="" />
        </el-select>
        <el-select v-model="formInline" style="width:100px" placeholder="请选择">
          <el-option label="未付" value="" />
          <el-option label="已付" value="" />
        </el-select>
        <el-select v-model="formInline" style="width:100px" placeholder="请选择">
          <el-option label="未付" value="" />
          <el-option label="已付" value="" />
        </el-select>
      </el-form-item>

      <el-form-item label="收件人姓名:">
        <el-input style="width:200px" placeholder="收件人姓名" />
      </el-form-item>

      <el-form-item label="收件人电话:">
        <el-input style="width:200px" placeholder="收件人电话" />
      </el-form-item>
      <el-form-item />

      <el-form-item label="收件人地址:">
        <el-select v-model="formInline" style="width:100px" placeholder="请选择">
          <el-option label="未付" value="" />
          <el-option label="已付" value="" />
        </el-select>
        <el-select v-model="formInline" style="width:100px" placeholder="请选择">
          <el-option label="未付" value="" />
          <el-option label="已付" value="" />
        </el-select>
        <el-select v-model="formInline" style="width:100px" placeholder="请选择">
          <el-option label="未付" value="" />
          <el-option label="已付" value="" />
        </el-select>
      </el-form-item>
    </el-form>
    <!-- 按钮 -->
    <el-row>
      <el-button type="success" round>搜索</el-button>
      <el-button type="info" round>重置</el-button>
    </el-row>
    <!-- 表格 -->
    <el-table
      :data="tableData"
      border
      style="width: 100%"
    >
      <el-table-column
        prop="date"
        label="序号"
        width="150"
      />
      <el-table-column
        prop="name"
        label="订单编号"
        width="120"
      />
      <el-table-column
        prop="name"
        label="运单编号"
        width="120"
      />
      <el-table-column
        prop="name"
        label="下单时间"
        width="120"
      />
      <el-table-column
        prop="name"
        label="订单状态"
        width="120"
      />
      <el-table-column
        prop="province"
        label="发件人姓名"
        width="120"
      />
      <el-table-column
        prop="city"
        label="发件人电话"
        width="120"
      />
      <el-table-column
        prop="address"
        label="发件人地址"
        width="300"
      />
      <el-table-column
        prop="address"
        label="收件人姓名"
        width="300"
      />
      <el-table-column
        prop="address"
        label="收件人电话"
        width="300"
      />
      <el-table-column
        prop="收件人地址"
        label="收件人地址"
        width="300"
      />
      <el-table-column
        prop="address"
        label="取件类型"
        width="300"
      />
      <el-table-column
        prop="收件人地址"
        label="付费类型"
        width="300"
      />
      <el-table-column
        prop="收件人地址"
        label="付费状态"
        width="300"
      />
      <el-table-column
        fixed="right"
        label="操作"
        width="100"
      >
        <template>
          <!-- 订单页面 -->
          <el-button type="text" size="small" @click="$router.push(`/tree/bill`)">查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      :page-sizes="[100, 200, 300, 400]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="200"
    />
  </div>
</template>

<script>
// import { orderAPI } from '@/api/order.js'
export default {
  data() {
    return {
      formInline: {
        user: '',
        region: ''
      },
      list: {
        id: '1635887161519304705', // 订单编号
        memberId: '1555110960890843137', // 运单编号
        createTime: '2023-03-15 14:14:27', // 下单时间
        status: 23000, // 订单状态
        senderName: '吴思涵', // 发件人姓名
        senderPhone: '15645237852', // 发件人电话
        receiverName: '邓诗涵', // 收件人姓名
        receiverPhone: '15745678521', // 收件人电话
        pickupType: 0, // 取件类型
        paymentMethod: 1, // 付费类型
        paymentStatus: 0 // 付费状态
      },
      // 假数据
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-04',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1517 弄',
        zip: 200333
      }, {
        date: '2016-05-01',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1519 弄',
        zip: 200333
      }, {
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1516 弄',
        zip: 200333
      }]
    }
  }
  // created() {
  //   this.orderAPI()
  // },
  // methods: {
  //   async orderAPI() {
  //     const res = await orderAPI(this.list)
  //     console.log(res)
  //     // this.orderAPI = res.data.organOverview
  //   },
  //   handleClick(row) {
  //     console.log(row)
  //   }
  // }

}
</script>

<style lang="scss" scoped>
*{
   margin: 0px;
   padding:0px
}
h3{
  margin-left: 20px;
  margin-top: 10px;
}
.el-form{
   margin:20px 40px;
}
.el-option{
   text-align:center;
}
.el-input{
  margin: 5px 10px
}
.el-button{
  position: relative;
  top: -10px;
  margin-top: 20px;
}
.el-pagination{
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
